<template>
  <div class="page">
    <el-button type="primary" @click="showAdd()">新增</el-button>
    <el-table :data="dataSource" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }">
      <el-table-column prop="name" label="名称" sortable width="180">
      </el-table-column>
      <el-table-column prop="addressName" label="显示地址">
      </el-table-column>
      <el-table-column prop="path" label="路由">
      </el-table-column>
      <el-table-column prop="path" label="封面">
        <template slot-scope="{row}">
          <el-image v-if="!row.child || !row.child.length" :src="baseApi + row.pathImg"
            :preview-src-list="[baseApi + row.pathImg]" style="width: 20px;" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66"
            inactive-color="#ff4949" @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="text" @click="showAdd(row)">修改</el-button>
          <el-button type="text" class="danger" @click="menuDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <editDialog ref="editDialog" :dataSource="dataSource" @refersh="init()" />
  </div>
</template>

<script>
import { menuSelect, menuDelete, menuStatus } from '@/api/menus'
import editDialog from './editDialog.vue'
import { mapGetters } from 'vuex'
export default {
  name: 'Manage40Index',
  components: {
    editDialog
  },
  data() {
    return {
      form: {},
      dataSource: []
    }
  },
  computed: {
    ...mapGetters([
      'imagesUploadApi',
      'baseApi'
    ])
  },
  mounted() {

    this.init()
  },

  methods: {
    init() {
      this.form.orderBy = 'sort'
      menuSelect({}).then(res => {
        const map = new Map()
        const list = []
        if (res.length > 0) {
          res.forEach(item => {
            if (item.parentId === 0) {
              map.set(item.id, item)
            }
          })
          map.forEach((v, k) => {
            list.push(v)
            res.forEach(item => {
              if (k === item.parentId) {
                v.child = v.child || []
                v.child.push(item)
                // this.$set(v, 'hasChildren', 1)
              } else {
                // this.$set(v, 'hasChildren', 0)
              }
            })
          })
        }
        this.dataSource = list
      })
    },
    showAdd(row) {
      this.$refs.editDialog.show(row)
    },
    menuDelete(row) {
      menuDelete({ id: row.id }).then(res => {
        this.init()
        this.$message.success('删除成功')
      })
    },
    async handleStatusChange(row) {
      // try {
      // const action = row.status === '1' ? '启用' : '停用'
      // await this.$confirm(`确定要${action}该功能吗？`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(res => {
        menuStatus(row).then(result => {
          if (row.status === 1) {
            this.$message.success('启用成功')
          } else {
            this.$message.success('停用成功')
          }
          this.init()
        })
      // })

      // // 调用相应的API
      // if (row.status === '1') {
      //   // await enableNurseTag(row.id)
      //   this.$message.success('启用成功')
      // } else {
      //   // await disableNurseTag(row.id)
      //   this.$message.success('停用成功')
      // }

      // // 重新加载数据以更新使用次数等信息
      // this.loadData()
      // } catch (error) {
      // if (error !== 'cancel') {
      //   // 如果操作失败，恢复原来的状态
      //   row.status = row.status === '1' ? '0' : '1'
      //   this.$message.error('操作失败')
      //   console.error(error)
      // } else {
      //   // 用户取消操作，恢复原来的状态
      //   row.status = row.status === '1' ? '0' : '1'
      // }
      // }
    }
  }
}
</script>

<style scoped>
.page {
  padding: 24px;
}
</style>
